<template>
<!--个人中心页-->
  <h1>个人中心页</h1>
  <div v-for="(weibo,i) in arr"
       style="width: 500px;height: 40px;margin: 0 auto;">
    <h3 style="float:left;margin:0;line-height:32px;">{{ weibo.content }}</h3>
    <el-button type="danger" style="float: right;" @click="del(weibo.id,i)">删除</el-button>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

  const arr = ref([]);
  onMounted(()=>{
    let user = localStorage.user?JSON.parse(localStorage.user):null;
    console.log(user);
    console.log(user.id);
    axios.get('http://localhost:8080/v1/weibos?userId='+user.id)
    .then((response)=>{
      if(response.data.code==2001){
        arr.value = response.data.data;
        if(arr.value.length==0){
          ElMessage.warning('快来发布你的第1条微博吧!');
          router.push('/post');
        }
      }
    })
  })

//添加删除的方法
const del = (id,i)=>{
    if(confirm('您确认要删除此条微博吗?')){
      //restful的风格,请求参数直接以斜杠的方式拼接在url中
      //http://localhost:8080/v1/weibos/12/delete
      axios.post('http://localhost:8080/v1/weibos/'+id+'/delete')
      .then((response)=>{
        if(response.data.code==2001){
          ElMessage.success('删除成功!');
          arr.value.splice(i,1);
          if(arr.value.length==0){
            ElMessage.warning('没内容啦!快去发微博吧!');
            router.push('/post');
          }
        }
      })
    }
}
</script>

<style scoped>

</style>